<!doctype html>
<html>
<head>
	<title>^js-42-demo</title>
	<meta charset="UTF-8"/>
	<style>
	
	*{
		margin:0;
		padding:0;
	}
		a{
			text-decoration:none;/*去掉a标签超链接的下划线*/
		}
		ul li{
			list-style:none;/*去掉ul列表前面的点*/
			width:5px;
			height:5px;
		}
		#box{
			width:600px;
			height:800px;
			margin:60px auto;
		}
		.cac{
			position:relative;
			width:200px;
			height:200px;
			border:1px solid #000;
			border-radius:50%;
			margin:auto;
			background-image:linear-gradient(#99ff66,#ffffcc); /*-------渐变色------*/
			box-shadow:15px 2px 10px #66ffff;
			/*-------阴影------*/
		}
/* ----------------------指针部分---------------------- */
		p{
			margin-bottom:2px;
		}
		#box .p1{
			position:absolute;
			width:45px;
			height:10px;
			left:50%;
			top:50%;
			background-color:#000;
		}
		#box .p2{
			position:absolute;
			width:65px;
			height:7px;
			left:50%;
			top:50%;
			background-color:#bbb;
		}
		#box .p3{
			position:absolute;
			width:85px;
			height:5px;
			left:50%;
			top:50%;
			background-color:#00ffff;
		}
		/* -------------------指针部分完------------------------- */
	/* -------------------3 6 9 12------------------------- */
		#box .cac .li3{
			position:absolute;
			left:95%;
			top:47%;
		}
		#box .cac .li6{
			position:absolute;
			left:45%;
			top:92%;
		}
		#box .cac .li9{
			position:absolute;
			left:2px;
			top:47%;
		}
		#box .cac .li12{
			position:absolute;
			left:45%;
			top:0;
		}
/* ----------------3  6  9  12完 ---------------------------- */
	/* -------------------整点部分------------------------- */
		#box .cac .li1{
			position:absolute;
			left:69%;
			top:6%;
		}
		#box .cac .li2{
			position:absolute;
			left:88%;
			top:22%;
		}
		#box .cac .li4{
			position:absolute;
			left:88%;
			top:70%;
		}
		#box .cac .li5{
			position:absolute;
			left:68%;
			top:88%;
		}
		#box .cac .li7{
			position:absolute;
			left:23%;
			top:85%;
		}
		#box .cac .li8{
			position:absolute;
			left:8%;
			top:68%;
		}
		#box .cac .li10{
			position:absolute;
			left:6%;
			top:25%;
		}
		#box .cac .li11{
			position:absolute;
			left:20%;
			top:10%;
		}
	/* --------------------整点部分完------------------------ */

	#p{
		margin-top:230px;
		width:200px;
		background-color:#ffffcc;
		text-align:center;
	}
	</style>
</head>
<body>
	<div id="box">
		<div class="cac">
			<p class="p1"></p>  <!-- 时 -->
			<p class="p2"></p>  <!-- 分 -->
			<p class="p3"></p>  <!-- 秒 -->
			<div>
				<ul>
					<li class="li1">1</li>
					<li class="li2">2</li>
					<li class="li3">3</li>
					<li class="li4">4</li>
					<li class="li5">5</li>
					<li class="li6">6</li>
					<li class="li7">7</li>
					<li class="li8">8</li>
					<li class="li9">9</li>
					<li class="li10">10</li>
					<li class="li11">11</li>
					<li class="li12">12</li>
				</ul>

			</div>
				<p id="p">
				
				</p>
		</div>

	</div>

</body>

	<script>
		
		var oP=document.querySelector("#p"),
			oP1=document.querySelector(".p1"),
			oP2=document.querySelector(".p2"),
			oP3=document.querySelector(".p3");

		
		var Set=setInterval(
			function(){
				var T=new Date(),
					h=T.getHours(),
					m=T.getMinutes(),
					s=T.getSeconds();
				var arr=[h,m,s];
				oP.innerHTML=arr;
			}
		,10);
	</script>
</html>